<script setup>
import {useForm} from "@inertiajs/vue3";
import useDialog from '@/composables/useDialog'
import useLoading from '@/composables/useLoading'
import useRequest from '@/composables/useRequest'
import {Message} from "@arco-design/web-vue";

const {FormRef, visible, mode, pk, actionName, width} = useDialog()
const {loading, setLoading} = useLoading()

const {createApi, updateApi, showApi} = useRequest('admin.setting.wechat.messages')

const emit = defineEmits(["success", "close"]);

const form = useForm({
    article_type: 'news',
    title:  '测试一下',
    author: '大脸猫',
    digest: '测试一下',
    content_source_url: '',
    thumb_media_url:'http://127.0.0.1:8000/storage/images/20250722/Lh3uK3d7X0gXXYkx5gZgok9YCk1KZLPMfu1BSYMf.jpg',
    thumb_media_id:'-f68SrbI4ecom6CBNXDb5iYDPRFzXO1OjLdvr2CbNM5kruzHVXTqOw5GQ9WcQuWg',
    image_info:[],
    content: '测试一下测试一下测试一下',
    status: 'draft', // 草稿 、 发布
    sort: 50
})

const rules = {
    article_type: [{required: true, message: '请选择文章类型', trigger: 'blur'}],
    title: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
    author:[{required: true, message: '请输入文章作者', trigger: 'blur'}],
    content: [{required: true, message: '请输入文章内容', trigger: 'blur'}],
    sort: [{required: true, message: '请输入文章排序', trigger: 'blur'}],
}



const handleSubmit = async () => {
    try {
        setLoading(true)
        const res = await FormRef.value?.validate()
        if (res) return false
        const apiMethod = mode.value === 'edit'
            ? () => updateApi(pk.value, form)
            : () => createApi(form)
        await apiMethod()
        Message.success(`${actionName.value}成功`)
        emit('success')
    } catch (error) {
        return false
    } finally {
        setLoading(false)
    }
}

const handleClose = () => {
    FormRef.value?.resetFields()
    form.reset()
    emit('close')
}

// 打开弹窗
const add = async () => {
    mode.value = 'add'
    visible.value = true
}

const edit = async (id) => {
    try {
        setLoading(true)
        pk.value = id
        const {data} = await showApi(id)
        Object.assign(form, data)
        mode.value = 'edit'
        visible.value = true
    } finally {
        setLoading(false)
    }
}

defineExpose({add, edit})
</script>
<template>
    <a-drawer
        v-model:visible="visible"
        :loading="loading"
        :title="`账号${actionName}`"
        :width
        @close="handleClose"
        @before-ok="handleSubmit"
    >
        <a-spin :loading="loading" class="w-full">


            <a-form ref="FormRef" :model="form" :rules auto-label-width>

                <a-form-item field="article_type" label="文章类型">
                    <a-radio-group v-model="form.article_type" type="button">
                        <a-radio value="news">图文</a-radio>
                        <a-radio value="newspic">图片</a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item  field="title" label="文章标题">
                    <a-input
                        v-model.trim="form.title"
                        allow-clear
                        placeholder="请输入文章标题"
                    />
                </a-form-item>

                <a-form-item field="content" label="文章内容">
                    <wechat-editor v-model="form.content" class="w-full" height="320px"></wechat-editor>
                </a-form-item>

                <a-form-item field="thumb_media_url" label="封面图片">
                    <wechat-upload v-model="form.thumb_media_url" v-model:mediaId="form.thumb_media_id"  />
                </a-form-item>

                <a-form-item field="digest" label="摘要">
                    <a-textarea
                        v-model="form.digest"
                        :auto-size="{
                        minRows: 4,
                    }"
                        allow-clear
                        placeholder="请输入摘要"
                    />
                </a-form-item>


                <a-form-item field="author" label="作者">
                    <a-input
                        v-model.trim="form.author"
                        allow-clear
                        placeholder="请输入作者"
                    />
                </a-form-item>

                <a-form-item field="content_source_url" label="原文链接">
                    <a-input
                        v-model.trim="form.content_source_url"
                        allow-clear
                        placeholder="请输入原文链接"
                    />
                </a-form-item>

                <a-form-item field="sort" label="排序">
                    <a-input-number v-model="form.sort" :min="1" :step="10" mode="button" placeholder="请输入排序"/>
                </a-form-item>
            </a-form>
        </a-spin>
    </a-drawer>
</template>

<style scoped>

</style>
